<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ</title>

    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/tabbar1.css">
    <link rel="stylesheet" href="./css/tabbar2.css">
    <link rel="stylesheet" href="./css/tabbar3.css">
    <script src="./js/size.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/index.js"></script>
</head>
<body>
    <div class="top flex flex-between">
        <div class="info flex">
            <img class="borderRadius50" src="./img/avatar/avatar_me.jpg" alt="">
            <p class="marginAuto0">胡子哥</p>
        </div>
        <div class="function flex marginAuto0">
            <img src="./img/camero.png" alt="">
            <img src="./img/add.png" alt="">
        </div>
    </div>
    <div class="search flex-column flex-center">
        <input placeholder="🔍搜索" class="searchInput textAlignCenter" type="text">
    </div>

    <div class="tabbar1 marginTabbar">
<!--        <div class="messageItem flex flex-between borderBottom">-->
<!--            <div class="flex">-->
<!--                <img class="borderRadius50" src="./img/avatar/avatar_xxbb.jpg" alt="">-->
<!--                <div class="content">-->
<!--                    <p class="nickName">旭旭宝宝</p>-->
<!--                    <p class="text">在吗？套s你个大马猴。</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <p class="time marginAuto0">11:34</p>-->
<!--        </div>-->
    </div>
    <div class="tabbar2 marginTabbar" style="display: none">
        <div class="newFriend flex flex-between borderBottom">
            <p class="marginAuto0">新朋友</p>
            <img class="marginAuto0" src="./img/right.png" alt="">
        </div>
        <div class="tabbar2Type flex flex-evenly">
            <p id="typeText1" class="typeText">好友</p>
            <p id="typeText2" class="typeText typeSelected">分组</p>
            <p id="typeText3" class="typeText">群聊</p>
            <p id="typeText4" class="typeText">设备</p>
        </div>
        <div class="mainFriend">
            <div class="mainFriendItem flex flex-between">
                <div class="mainFriendItemLeft flex">
                    <img class="marginAuto0" src="./img/rightSjx.png" alt="">
                    <p>特别关心</p>
                </div>
                <p class="stateNum marginAuto0">0/1</p>
            </div>
            <div class="allPart">
                <div id="myInterFriend" class="mainFriendItem flex flex-between">
                    <div class="mainFriendItemLeft flex">
                        <img class="marginAuto0" src="./img/rightSjx.png" alt="">
                        <p>我的好友</p>
                    </div>
                    <p class="stateNum marginAuto0">54/69</p>
                </div>
<!--                <div class="myFriendItem flex flex-between borderBottom" style="display: none">-->
<!--                    <div class="flex">-->
<!--                        <img class="borderRadius50" src="./img/avatar/avatar_xxbb.jpg" alt="">-->
<!--                        <div class="myFriendItemContent">-->
<!--                            <p class="nickName">旭旭宝宝</p>-->
<!--                            <p class="text noWrapHiddenEllipse">在吗？套s你个大马猴。</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <p class="state marginAuto0">在线</p>-->
<!--                </div>-->
            </div>

            <div class="mainFriendItem flex flex-between">
                <div class="mainFriendItemLeft flex">
                    <img class="marginAuto0" src="./img/rightSjx.png" alt="">
                    <p>同学</p>
                </div>
                <p class="stateNum marginAuto0">51/73</p>
            </div>
            <div class="mainFriendItem flex flex-between">
                <div class="mainFriendItemLeft flex">
                    <img class="marginAuto0" src="./img/rightSjx.png" alt="">
                    <p>同事</p>
                </div>
                <p class="stateNum marginAuto0">17/53</p>
            </div>
        </div>
    </div>
    <div class="tabbar3 marginTabbar" style="display: none">
        <div class="theTop flex-column flex-between">
            <p class="titleDt textAlignCenter bold">动态</p>
            <div class="infoDt flex flex-between">
                <img class="borderRadius50" src="./img/avatar/avatar_me.jpg" alt="">
                <div class="fk marginAuto0">
                    <div class="fkToday flex">
                        <p class="fkTodayText">今日访客</p>
                        <p class="fkTodayNum">15</p>
                    </div>
                    <div class="fkAll flex">
                        <p class="fkAllText">访客总量</p>
                        <p class="fkAllNum">7014</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="functionDt flex flex-around">
            <div class="functionDtItem">
                <img class="margin0Auto" src="./img/dt/dt_1photo.png" alt="">
                <p class="textAlignCenter">相册</p>
            </div>
            <div class="functionDtItem">
                <img class="margin0Auto" src="./img/dt/dt_2ss.png" alt="">
                <p class="textAlignCenter">说说</p>
            </div>
            <div class="functionDtItem">
                <img class="margin0Auto" src="./img/dt/dt_3gxh.png" alt="">
                <p class="textAlignCenter">个性化</p>
            </div>
            <div class="functionDtItem">
                <img class="margin0Auto" src="./img/dt/dt_4game.png" alt="">
                <p class="textAlignCenter">小游戏</p>
            </div>
            <div class="functionDtItem">
                <img class="margin0Auto" src="./img/dt/dt_5video.png" alt="">
                <p class="textAlignCenter">小视频</p>
            </div>
        </div>
        <div class="singleSs">
            <div class="infoSs flex flex-between">
                <div class="infoSsLeft flex">
                    <img class="borderRadius50" src="./img/avatar_xxbb.jpg" alt="">
                    <div class="info marginAuto0">
                        <p class="nickName">旭旭宝宝</p>
                        <p class="time">今天08：58</p>
                    </div>
                </div>
                <img class="more marginAuto0" src="./img/more.png" alt="">
            </div>
            <div class="contentSs">
                <p>
                    爸爸给你磕头了，爸爸求你上去！就这，我还没认真呢，昂！我把你放的是挺挺的我什么身份啊，昂！套你猴子。
                </p>
            </div>
            <div class="phone flex">
                <img class="marginAuto0" src="./img/phone.png" alt="">
                <p class="marginAuto0">OPPO R11</p>
            </div>
            <div class="functionSs flex flex-between">
                <p class="looked marginAuto0">浏览421次</p>
                <div class="theTrible flex flex-between">
                    <img src="./img/dt/dt_dz.png" alt="">
                    <img src="./img/dt/dt_pl.png" alt="">
                    <img src="./img/dt/dt_fx.png" alt="">
                </div>
            </div>
            <div class="dzList flex">
                <img src="./img/dt/dt_dz.png" alt="">
                <p>大西瓜、梅西、詹姆斯、旺仔牛奶等41人觉得很赞</p>
            </div>
            <div class="comment">
                <div class="singleComment flex">
                    <p class="nickNameComment">詹姆斯</p>
                    <p class="contentComment">:😀，这也太有意思了吧！</p>
                </div>
                <div class="singleComment flex">
                    <p class="nickNameComment">大西瓜</p>
                    <p class="contentComment">:宝哥带带我。。</p>
                </div>
            </div>
        </div>
        <div class="singleSs">
            <div class="infoSs flex flex-between">
                <div class="infoSsLeft flex">
                    <img class="borderRadius50" src="./img/avatar_xxbb.jpg" alt="">
                    <div class="info marginAuto0">
                        <p class="nickName">旭旭宝宝</p>
                        <p class="time">今天08：58</p>
                    </div>
                </div>
                <img class="more marginAuto0" src="./img/more.png" alt="">
            </div>
            <div class="contentSs">
                <p>
                    《论语》是儒家经典之一，是一部以记言为主的语录体散文集，主要以语录和对话文体的形式记录了孔子及其弟子的言行，
                    集中体现了孔子的政治、审美、道德伦理和功利等价值思想。
                </p>
            </div>
            <div class="phone flex">
                <img class="marginAuto0" src="./img/phone.png" alt="">
                <p class="marginAuto0">OPPO R11</p>
            </div>
            <div class="functionSs flex flex-around">
                <p class="looked marginAuto0">浏览421次</p>
                <div class="theTrible flex flex-between">
                    <img src="./img/dt/dt_dz.png" alt="">
                    <img src="./img/dt/dt_pl.png" alt="">
                    <img src="./img/dt/dt_fx.png" alt="">
                </div>
            </div>
            <div class="dzList flex">
                <img src="./img/dt/dt_dz.png" alt="">
                <p>大西瓜、梅西、詹姆斯、旺仔牛奶等41人觉得很赞</p>
            </div>
            <div class="comment">
                <div class="singleComment flex">
                    <p class="nickNameComment noWrap">詹姆斯</p>
                    <p class="contentComment">:😀，这也太有意思了吧！</p>
                </div>
                <div class="singleComment flex">
                    <p class="nickNameComment">大西瓜</p>
                    <p class="contentComment">:宝哥带带我。。</p>
                </div>
            </div>
        </div> <div class="singleSs">
        <div class="infoSs flex flex-between">
            <div class="infoSsLeft flex">
                <img class="borderRadius50" src="./img/avatar_xxbb.jpg" alt="">
                <div class="info marginAuto0">
                    <p class="nickName">旭旭宝宝</p>
                    <p class="time">今天08：58</p>
                </div>
            </div>
            <img class="more marginAuto0" src="./img/more.png" alt="">
        </div>
        <div class="contentSs">
            <p>
                《论语》是儒家经典之一，是一部以记言为主的语录体散文集，主要以语录和对话文体的形式记录了孔子及其弟子的言行，
                集中体现了孔子的政治、审美、道德伦理和功利等价值思想。
            </p>
        </div>
        <div class="phone flex">
            <img class="marginAuto0" src="./img/phone.png" alt="">
            <p class="marginAuto0">OPPO R11</p>
        </div>
        <div class="functionSs flex flex-around">
            <p class="looked marginAuto0">浏览421次</p>
            <div class="theTrible flex flex-around">
                <img src="./img/dt/dt_dz.png" alt="">
                <img src="./img/dt/dt_pl.png" alt="">
                <img src="./img/dt/dt_fx.png" alt="">
            </div>
        </div>
        <div class="dzList flex">
            <img src="./img/dt/dt_dz.png" alt="">
            <p>大西瓜、梅西、詹姆斯、旺仔牛奶等41人觉得很赞</p>
        </div>
        <div class="comment">
            <div class="singleComment flex">
                <p class="nickNameComment">詹姆斯</p>
                <p class="contentComment">:😀，这也太有意思了吧！</p>
            </div>
            <div class="singleComment flex">
                <p class="nickNameComment">大西瓜</p>
                <p class="contentComment">:宝哥带带我。。</p>
            </div>
        </div>
    </div>
        <img class="addSs" src="./img/dt/dt_add.png" alt="">
    </div>

    <div class="tabbar flex flex-around">
        <div id="tabbarItem1" class="tabbarItem textAlignCenter">
            <img class="margin0Auto" src="./img/tabbar/tabbar1Selected.png" alt="">
            <p class="tabbarText tabbarSelected">消息</p>
        </div>
        <div id="tabbarItem2" class="tabbarItem textAlignCenter">
            <img class="margin0Auto" src="./img/tabbar/tabbar2.png" alt="">
            <p class="tabbarText">联系人</p>
        </div>
        <div id="tabbarItem3" class="tabbarItem textAlignCenter">
            <img class="margin0Auto" src="./img/tabbar/tabbar3.png" alt="">
            <p class="tabbarText">动态</p>
        </div>
    </div>

<!--    <div class="addSsPage">-->
<!--        <div class="addSsPageTop">-->
<!--            <p>取消</p>-->
<!--            <p>写说说</p>-->
<!--            <p>发表</p>-->
<!--        </div>-->
<!--    </div>-->
</body>
</html>